import {FC, memo, ReactNode,useState} from "react";
import {Box, Grid, GridItem, Icon} from "@chakra-ui/react";
import Content from "@/views/discover/c-views/rangking/c-cpns/content";
import Comment from "@/views/discover/c-views/rangking/c-cpns/comment";
import Slider from "@/views/discover/c-views/rangking/c-cpns/sider";
import {generateAlbums, mockAlbums} from "@/faker/album/albums";
import {generateSongs,mockSongs} from "@/faker/songs/ranking-songs";
import { AddIcon,CheckCircleIcon ,ChatIcon} from "@chakra-ui/icons";
// 示例评论数据
const comments = [
    {
        id: 1,
        username: 'Y超超',
        avatarUrl: 'https://example.com/avatar1.jpg',
        content: '听了第一首歌就一直单曲循环的有没有 😂',
        timestamp: '2018-10-31 14:58:52',
    },  {
        id: 1,
        username: 'Y超超',
        avatarUrl: 'https://example.com/avatar1.jpg',
        content: '听了第一首歌就一直单曲循环的有没有 😂',
        timestamp: '2018-10-31 14:58:52',
    },  {
        id: 1,
        username: 'Y超超',
        avatarUrl: 'https://example.com/avatar1.jpg',
        content: '听了第一首歌就一直单曲循环的有没有 😂',
        timestamp: '2018-10-31 14:58:52',
    },  {
        id: 1,
        username: 'Y超超',
        avatarUrl: 'https://example.com/avatar1.jpg',
        content: '听了第一首歌就一直单曲循环的有没有 😂',
        timestamp: '2018-10-31 14:58:52',
    },  {
        id: 1,
        username: 'Y超超',
        avatarUrl: 'https://example.com/avatar1.jpg',
        content: '听了第一首歌就一直单曲循环的有没有 😂',
        timestamp: '2018-10-31 14:58:52',
    },  {
        id: 1,
        username: 'Y超超',
        avatarUrl: 'https://example.com/avatar1.jpg',
        content: '听了第一首歌就一直单曲循环的有没有 😂',
        timestamp: '2018-10-31 14:58:52',
    },  {
        id: 1,
        username: 'Y超超',
        avatarUrl: 'https://example.com/avatar1.jpg',
        content: '听了第一首歌就一直单曲循环的有没有 😂',
        timestamp: '2018-10-31 14:58:52',
    },  {
        id: 1,
        username: 'Y超超',
        avatarUrl: 'https://example.com/avatar1.jpg',
        content: '听了第一首歌就一直单曲循环的有没有 😂',
        timestamp: '2018-10-31 14:58:52',
    },  {
        id: 1,
        username: 'Y超超',
        avatarUrl: 'https://example.com/avatar1.jpg',
        content: '听了第一首歌就一直单曲循环的有没有 😂',
        timestamp: '2018-10-31 14:58:52',
    },  {
        id: 1,
        username: 'Y超超',
        avatarUrl: 'https://example.com/avatar1.jpg',
        content: '听了第一首歌就一直单曲循环的有没有 😂',
        timestamp: '2018-10-31 14:58:52',
    },  {
        id: 1,
        username: 'Y超超',
        avatarUrl: 'https://example.com/avatar1.jpg',
        content: '听了第一首歌就一直单曲循环的有没有 😂',
        timestamp: '2018-10-31 14:58:52',
    },
    // 更多评论...
];

interface IProps {
    children?:ReactNode
}

const Ranking :FC<IProps>  = () =>{
    const fetchSongsApi = async (type: string) => await generateSongs(10);
    const fetchAlbumsApi = async (type: string) => await generateAlbums(10);
    
    const [currentContentPage, setCurrentContentPage] = useState(1);
    const onContentPageChange = (page: number) => {
        setCurrentContentPage(page);
        fetchSongsApi('new-page');
    };
    return (
        <>
            <Grid templateColumns="repeat(4, 1fr)" gap="6">
                <GridItem colSpan={1}>
                    <Slider fetchAlbums={fetchAlbumsApi} />
                </GridItem>
                <GridItem colSpan={3}>
                    <Content  totalPages={1}  showPagination fetchSongs={fetchSongsApi} currentPage={currentContentPage} onPageChange={onContentPageChange} />
                    <Comment   itemsPerPage={5}     showPagination/>
                </GridItem>
            </Grid>
        </>
    )
}

export default memo(Ranking)
